<template>
	<div class="banner">
		<div class="drop-shadow">
			<div class="glass"></div>
			<span>信科辩论队</span>
		</div>
	</div>
</template>

<script>
export default {
	name: 'home',
	data() {
		return {};
	},
};
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.banner {
	width: 100vw;
	height: 85vh;
	// width: 100vh;
	// height: 900px;
	background: url(../../assets/home.png);
	background-position: center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

.glass {
	width: 100%;
	height: 100%;
	background: url(../../assets/home.png);
	background-size: cover;
	background-position: center;
	clip-path: inset(200px 200px);
	filter: blur(20px);
	display: flex;
	justify-content: center;
	align-items: center;
}
span {
	position: absolute;
	color: white;
	font-size: 40px;
	letter-spacing: 0.75em;
	padding-left: 0.375em;
}
.drop-shadow {
	height: 100%;
	width: 100%;
	filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.5));
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
